Common HTML Codes Used in MyOpenMath

Below are some copy/pasteable codes that can be used in MyOpenMath to add different widgets to your assignments in MyOpenMath for the GeoGebra tools used inside this project.

Formatting Elements for MyOpenMath

The following code is a container I made for the "Question Text" portion of MyOpenMath so that problems are displayed in a visually appealing way. The font, color of the contents, and background-colors are all customizable.

Contains a div element for embedding into MyOpenMath problems to make the "Question Text" area pretty with the following settings:

The <div> uses a light green background (#DFF6DD) with dark green text (#034732) for clarity.
Added padding and rounded corners for a modern, clean design.
The font size is 16px and font stack prioritizes "Roboto", with fallbacks to "Arial" and generic sans-serif fonts.

The following code is a container I made for my "Instruction Text" portion of MyOpenMath assessments so that they are displayed in a visually appealing way. The font, color of the contents, and background-colors are all customizable.

Contains a div element for containing instructions into MyOpenMath problems to make the "Instruction" area for tests and quizzes pretty with the following settings:

The <div> uses a soft pastel orange background (#FFD8B1) with deep reddish-brown text (#6B1E1E) for clarity.
Added padding and rounded corners for a modern, clean design.
The font size is 16px and font stack prioritizes "Roboto", with fallbacks to "Arial" and generic sans-serif fonts.

Here is some code that contains the script element for making a "copy to clipboard" button as well as the "pre" element that contains the CSV data that will be copied.

Contains an HTML snippet that provides a "Copy to Clipboard" script element, the "button" HTML, and the pre CSV (output as $preCSV using the next code) element with the dataset inside a styled container for MyOpenMath.

Here is some code that contains the PHP code for setting data arrays and putting them into a nice table in the "Common Control" section of MyOpenMath. Includes code to add the "stats" library, and has code to make the data table collapsable.

Contains PHP snippet that for making an array of data for two columns and putting it into a table. The code loads the "stats" library, and can be pasted into the "common control" section of a MyOpenMath problem.

// Load the stats library
loadlibrary("stats");

// Define an array for column labels
$labelArray = ["Mass (g)", "Volume (mL)"];

// Set a value for number of data rows you will have
$n = 5
$n1 = $n-1 //arrays start at 0 so this is for those

// Generate two datasets (replace with real data or random values)
$dataset1 = [2.5, 3.1, 4.7, 5.2, 6.3]; // Example mass data
// Generate an array with $n randomized values between 5.0 and 10.0, rounded to 1 decimal place
//rrands(minimum,maximum,step-size,number of random values)
$dataset2 = rrands(5.0, 10.0, 0.1, $n);

// Create the table using showarrays, which formats the data as a table
$dataTable = showarrays($labelArray, array($dataset1, $dataset2));

// Create a toggle button to show/hide the table
$tableToggleButton = forminlinebutton("Show/Hide Data", "$dataTable", "button", "block");

// Create a <pre> element from your data
$preCSV = "<pre id=\"dataID\" style=\"display:none;\">$labelArray\n";

for ($i = 0..$n1) {
      $preCSV .= "$dataset1[$i],$dataset2[$i]\n";
    }
    
    $preCSV .= "</pre>";

Chapter 1 and Chapter 4 Tool

Just providing a GeoGebra calculator is simple enough for most of chapter 1 and chapter 4. Below is a link you can use to drop this tool into your MyOpenMath content.

Contains a responsive iframe element for embedding the Scientific Calculator GeoGebra tool into MyOpenMath or webpages.

Chapter 2 Tools - Data Visualization and Organization

Most of the tools in this section provide tables or graphs based on the data entered into the spreadsheet columns.

Contains a responsive iframe element for embedding the GeoGebra Frequency Distribution tool into MyOpenMath problems.

<p>Below is the GeoGebra Frequency Distribution Tool. If this app is too small to view, you can open the <a href="https://www.geogebra.org/m/qg4j4jc4" target="_blank">application here in a new window</a>. If the spreadsheet isn't showing, you can click the "hamburger" menu in the top right corner, click "view", and toggle the "spreadsheet" on to paste in your data.</p>
                                <div style="background-color: #A9D6E5; border: 3px solid #034078; padding: 10px; border-radius: 5px; display: flex; justify-content: center;">
                                    <div style="position: relative; width: 100%; max-width: 800px; padding-top: 49%;">
                                        <iframe scrolling="no" title="Frequency Distribution Tool"
                                            src="https://www.geogebra.org/material/iframe/id/vhvywg89/width/1390/height/681/border/888888/sfsb/true/smb/true/stb/false/stbh/false/ai/false/asb/false/sri/true/rc/false/ld/false/sdz/false/ctl/false"
                                            style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0;">
                                        </iframe>
                                    </div>
                                </div>

Contains a responsive iframe element for embedding the Histogram Generator GeoGebra tool into MyOpenMath problems.

<p>Below is the GeoGebra Histogram Generator Tool. If this app is too small to view, you can open the
                                    <a href="https://www.geogebra.org/material/iframe/id/p8ubdwrm" target="_blank" rel="noopener noreferrer"
                                       style="font-weight: bold; color: #034078; text-decoration: underline;">
                                        application here in a new window
                                    </a>.
                                    If the spreadsheet isn't showing, you can click the "hamburger" menu in the top right corner, click "view", and toggle the "spreadsheet" on to paste in your data.
                                </p>
                                <div style="background-color: #A9D6E5; border: 3px solid #034078; padding: 10px; border-radius: 5px; display: flex; justify-content: center;">
                                    <div style="position: relative; width: 100%; max-width: 800px; padding-top: 89.8%;">
                                        <iframe scrolling="no" title="Histogram Generator Tool"
                                            src="https://www.geogebra.org/material/iframe/id/p8ubdwrm/width/973/height/874/border/888888/sfsb/true/smb/true/stb/false/stbh/false/ai/false/asb/false/sri/false/rc/false/ld/false/sdz/false/ctl/false"
                                            style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0;">
                                        </iframe>
                                    </div>
                                </div>

Contains a responsive iframe element for embedding the Stem-And-Leaf Plot GeoGebra tool into MyOpenMath problems.

<p>Below is the GeoGebra Stem-And-Leaf Plot Tool. If this app is too small to view, you can open the
                                    <a href="https://www.geogebra.org/m/payaagsb" target="_blank" rel="noopener noreferrer">
                                        application here in a new window
                                    </a>.
                                </p>
                                <div style="background-color: #A9D6E5; border: 3px solid #034078; padding: 10px; border-radius: 5px; display: flex; justify-content: center;">
                                    <div style="position: relative; width: 100%; max-width: 800px; padding-top: 75%;">
                                        <iframe scrolling="no" title="Stem-And-Leaf Plot Tool"
                                            src="https://www.geogebra.org/material/iframe/id/payaagsb"
                                            style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0;">
                                        </iframe>
                                    </div>
                                </div>

Contains a responsive iframe element for embedding the Dot Plot GeoGebra tool into MyOpenMath problems.

<p>Below is the GeoGebra Dot Plot Tool. If this app is too small to view, you can open the
                                    <a href="https://www.geogebra.org/m/svdxyybm" target="_blank" rel="noopener noreferrer">
                                        application here in a new window
                                    </a>.
                                </p>
                                <div style="background-color: #A9D6E5; border: 3px solid #034078; padding: 10px; border-radius: 5px; display: flex; justify-content: center;">
                                    <div style="position: relative; width: 100%; max-width: 800px; padding-top: 75%;">
                                        <iframe scrolling="no" title="Dot Plot Tool"
                                            src="https://www.geogebra.org/material/iframe/id/svdxyybm"
                                            style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0;">
                                        </iframe>
                                    </div>
                                </div>

Contains a responsive iframe element for embedding the Time Series Plot GeoGebra tool into MyOpenMath problems.

<p>Below is the GeoGebra Time Series Plot Tool. If this app is too small to view, you can open the
                                    <a href="https://www.geogebra.org/m/khx9mq7k" target="_blank" rel="noopener noreferrer">
                                        application here in a new window
                                    </a>.
                                </p>
                                <div style="background-color: #A9D6E5; border: 3px solid #034078; padding: 10px; border-radius: 5px; display: flex; justify-content: center;">
                                    <div style="position: relative; width: 100%; max-width: 800px; padding-top: 75%;">
                                        <iframe scrolling="no" title="Time Series Plot Tool"
                                            src="https://www.geogebra.org/material/iframe/id/khx9mq7k"
                                            style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0;">
                                        </iframe>
                                    </div>
                                </div>

Contains a responsive iframe element for embedding the Bar and Pie Graph GeoGebra tool into MyOpenMath problems.

<p>Below is the GeoGebra Bar and Pie Graph Tool. If this app is too small to view, you can open the
                                    <a href="https://www.geogebra.org/m/tmu6ja9y" target="_blank" rel="noopener noreferrer">
                                        application here in a new window
                                    </a>.
                                </p>
                                <div style="background-color: #A9D6E5; border: 3px solid #034078; padding: 10px; border-radius: 5px; display: flex; justify-content: center;">
                                    <div style="position: relative; width: 100%; max-width: 800px; padding-top: 75%;">
                                        <iframe scrolling="no" title="Bar and Pie Graph Tool"
                                            src="https://www.geogebra.org/material/iframe/id/tmu6ja9y"
                                            style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0;">
                                        </iframe>
                                    </div>
                                </div>

Chapter 3 Tools - Descriptive Statistics

Below are the GeoGebra tool iframe elements for the descriptive statistics chapter of content that calculate these based on data that is in columns in the spreadsheet.

Contains a responsive iframe element for embedding the Summary Stats Calculator GeoGebra tool into MyOpenMath problems.

<p>Below is the GeoGebra Summary Stats Calculator Tool. If this app is too small to view, you can open the
                                    <a href="https://www.geogebra.org/m/gka7dwu7" target="_blank" rel="noopener noreferrer">
                                        application here in a new window
                                    </a>.
                                </p>
                                <div style="background-color: #A9D6E5; border: 3px solid #034078; padding: 10px; border-radius: 5px; display: flex; justify-content: center;">
                                    <div style="position: relative; width: 100%; max-width: 800px; padding-top: 48.8%;">
                                        <iframe scrolling="no" title="Summary Stats Calculator"
                                            src="https://www.geogebra.org/material/iframe/id/gka7dwu7/width/1324/height/646/border/888888/sfsb/true/smb/true/stb/false/stbh/false/ai/false/asb/false/sri/true/rc/false/ld/false/sdz/false/ctl/false"
                                            style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0;">
                                        </iframe>
                                    </div>
                                </div>

Contains a responsive iframe element for embedding the GeoGebra Empirical Rule Calculator into MyOpenMath problems.

<p>Below is the GeoGebra Empirical Rule Calculator. If this app is too small to view, you can open the 
                                    <a href="https://www.geogebra.org/m/xttfsxzr" target="_blank" rel="noopener noreferrer">
                                        application here in a new window
                                    </a>.
                                </p>
                                <div style="background-color: #A9D6E5; border: 3px solid #034078; padding: 10px; border-radius: 5px; display: flex; justify-content: center;">
                                    <div style="position: relative; width: 100%; max-width: 800px; padding-top: 56.4%;">
                                        <iframe scrolling="no" title="Empirical Rule Calculator" 
                                            src="https://www.geogebra.org/material/iframe/id/xttfsxzr/width/1164/height/656/border/888888/sfsb/true/smb/false/stb/false/stbh/false/ai/false/asb/false/sri/true/rc/false/ld/false/sdz/false/ctl/false" 
                                            style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0;">
                                        </iframe>
                                    </div>
                                </div>

Contains a responsive iframe element for embedding the Box Plot Generator GeoGebra tool into MyOpenMath problems.

<p>Below is the GeoGebra Box Plot Generator Tool. If this app is too small to view, you can open the
                                    <a href="https://www.geogebra.org/m/gyymcsbx" target="_blank" rel="noopener noreferrer">
                                        application here in a new window
                                    </a>.
                                </p>
                                <div style="background-color: #A9D6E5; border: 3px solid #034078; padding: 10px; border-radius: 5px; display: flex; justify-content: center;">
                                    <div style="position: relative; width: 100%; max-width: 800px; padding-top: 54.2%;">
                                        <iframe scrolling="no" title="Box Plot Generator"
                                            src="https://www.geogebra.org/material/iframe/id/gyymcsbx/width/904/height/490/border/888888/sfsb/true/smb/true/stb/false/stbh/false/ai/false/asb/false/sri/true/rc/false/ld/false/sdz/true/ctl/false"
                                            style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0;">
                                        </iframe>
                                    </div>
                                </div>

Chapter 5 Tools - Binomial Distributions

You can copy the Binomial GeoGebra tool's iframe element below for use in the probability distribution section of your course.

Contains a responsive iframe element for embedding the Binomial Distribution Calculator GeoGebra tool into MyOpenMath problems.

<p>Below is the GeoGebra Binomial Distribution Calculator Tool. If this app is too small to view, you can open the
                                    <a href="https://www.geogebra.org/m/prfhvg3m" target="_blank" rel="noopener noreferrer">
                                        application here in a new window
                                    </a>.
                                </p>
                                <div style="background-color: #A9D6E5; border: 3px solid #034078; padding: 10px; border-radius: 5px; display: flex; justify-content: center;">
                                    <div style="position: relative; width: 100%; max-width: 800px; padding-top: 54.6%;">
                                        <iframe scrolling="no" title="Binomial Distribution Calculator"
                                            src="https://www.geogebra.org/material/iframe/id/prfhvg3m/width/827/height/452/border/888888/sfsb/true/smb/false/stb/false/stbh/false/ai/false/asb/false/sri/true/rc/false/ld/false/sdz/false/ctl/false"
                                            style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0;">
                                        </iframe>
                                    </div>
                                </div>

Chapter 6 - Normal Distributions

Here is the GeoGebra applet iframe element for working with the normal distribution (finding areas, z-scores, etc).

Contains a responsive iframe element for embedding the Normal Distribution Calculator GeoGebra tool into MyOpenMath problems.

<p>Below is the GeoGebra Normal Distribution Calculator Tool. If this app is too small to view, you can open the
                                    <a href="https://www.geogebra.org/m/rjms6u8t" target="_blank" rel="noopener noreferrer">
                                        application here in a new window
                                    </a>.
                                </p>
                                <div style="background-color: #A9D6E5; border: 3px solid #034078; padding: 10px; border-radius: 5px; display: flex; justify-content: center;">
                                    <div style="position: relative; width: 100%; max-width: 800px; padding-top: 40.4%;">
                                        <iframe scrolling="no" title="Normal Distribution Calculator"
                                            src="https://www.geogebra.org/material/iframe/id/rjms6u8t/width/1350/height/545/border/888888/sfsb/true/smb/false/stb/false/stbh/false/ai/false/asb/false/sri/true/rc/false/ld/false/sdz/false/ctl/false"
                                            style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0;">
                                        </iframe>
                                    </div>
                                </div>

Chapter 7, 8, and 9 - Inferential Statistics

Here is the iframe element for the tool that will do all of your inferential statistics calculations for the final leg of the statistics course.

Contains a responsive iframe element for embedding the Confidence Intervals and Hypothesis Testing GeoGebra tool into MyOpenMath problems.

<p>Below is the GeoGebra Confidence Intervals and Hypothesis Testing Tool. If this app is too small to view, you can open the
                                    <a href="https://www.geogebra.org/m/yqvx78n5" target="_blank" rel="noopener noreferrer">
                                        application here in a new window
                                    </a>.
                                </p>
                                <div style="background-color: #A9D6E5; border: 3px solid #034078; padding: 10px; border-radius: 5px; display: flex; justify-content: center;">
                                    <div style="position: relative; width: 100%; max-width: 800px; padding-top: 59.2%;">
                                        <iframe scrolling="no" title="Confidence Interval and Hypothesis Test Calculator"
                                            src="https://www.geogebra.org/material/iframe/id/yqvx78n5/width/1100/height/651/border/888888/sfsb/true/smb/true/stb/false/stbh/false/ai/false/asb/false/sri/true/rc/false/ld/false/sdz/false/ctl/false"
                                            style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0;">
                                        </iframe>
                                    </div>
                                </div>

Contains a responsive iframe element for embedding the T-Distribution Calculator GeoGebra tool into MyOpenMath problems.

<p>Below is the GeoGebra T-Distribution Calculator Tool. If this app is too small to view, you can open the
                                    <a href="https://www.geogebra.org/m/ubcyajry" target="_blank" rel="noopener noreferrer">
                                        application here in a new window
                                    </a>.
                                </p>
                                <div style="background-color: #A9D6E5; border: 3px solid #034078; padding: 10px; border-radius: 5px; display: flex; justify-content: center;">
                                    <div style="position: relative; width: 100%; max-width: 800px; padding-top: 64.1%;">
                                        <iframe scrolling="no" title="Student T Calculator"
                                            src="https://www.geogebra.org/material/iframe/id/ubcyajry/width/971/height/622/border/888888/sfsb/true/smb/false/stb/false/stbh/false/ai/false/asb/false/sri/true/rc/false/ld/false/sdz/false/ctl/false"
                                            style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0;">
                                        </iframe>
                                    </div>
                                </div>

Chapter 10 - Linear Regression

Here is the tool used for the Linear Regression, Correlation, and Prediction section of the statistics course.

Contains a responsive iframe element for embedding the Linear Regression GeoGebra tool into MyOpenMath problems.

<p>Below is the GeoGebra Linear Regression Tool. If this app is too small to view, you can open the
                                    <a href="https://www.geogebra.org/m/epr8jb4h" target="_blank" rel="noopener noreferrer">
                                        application here in a new window
                                    </a>.
                                </p>
                                <div style="background-color: #A9D6E5; border: 3px solid #034078; padding: 10px; border-radius: 5px; display: flex; justify-content: center;">
                                    <div style="position: relative; width: 100%; max-width: 800px; padding-top: 70.6%;">
                                        <iframe scrolling="no" title="Linear Regression Tool" src="https://www.geogebra.org/material/iframe/id/npksdkc4/width/967/height/759/border/888888/sfsb/true/smb/true/stb/false/stbh/false/ai/false/asb/false/sri/true/rc/false/ld/false/sdz/false/ctl/false" width="967px" height="759px" style="border:0px;"> </iframe>
                                    </div>
                                </div>